<template>
  <div class="message-push-block">
    <div class="block-header">
      <span class="block-title">推送消息</span>
    </div>
    <div class="message-content">
      <div class="message-chart-box">
        <div ref="lineRef" class="message-line-chart"></div>
      </div>
      <div class="message-list">
        <div class="message-item" v-for="(item, idx) in messages" :key="item.id">
          <img class="msg-icon" :src="item.icon" alt="icon" />
          <div class="msg-info">
            <div class="msg-title">{{ item.title }}</div>
            <div class="msg-time">{{ item.time }}</div>
          </div>
          <div v-if="idx < messages.length - 1" class="msg-divider"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
const lineRef = ref(null)
const messages = [
  { id: 1, title: '管网压力异常', time: '2025-06-08 09:00', icon: 'https://cdn.jsdelivr.net/gh/iconoir-icons/svg/warning-triangle.svg' },
  { id: 2, title: '流量监测恢复正常', time: '2025-06-08 08:50', icon: 'https://cdn.jsdelivr.net/gh/iconoir-icons/svg/check-circle.svg' },
  { id: 3, title: '水位超限告警', time: '2025-06-08 08:40', icon: 'https://cdn.jsdelivr.net/gh/iconoir-icons/svg/water.svg' },
]
onMounted(() => {
  const chart = echarts.init(lineRef.value)
  chart.setOption({
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      axisLine: { lineStyle: { color: '#00eaff' } },
      axisLabel: { color: '#fff' }
    },
    yAxis: {
      type: 'value',
      axisLine: { lineStyle: { color: '#00eaff' } },
      axisLabel: { color: '#fff' },
      splitLine: { lineStyle: { color: '#1e3c5a' } }
    },
    series: [{
      data: [120, 132, 101, 134, 90, 230, 210],
      type: 'line',
      smooth: true,
      lineStyle: { color: '#00eaff', width: 3 },
      areaStyle: { color: 'rgba(0,234,255,0.15)' },
      symbol: 'circle',
      symbolSize: 10
    }],
    grid: { left: 10, right: 10, top: 20, bottom: 20 },
    backgroundColor: 'transparent'
  })
})
</script>

<style scoped>
.message-push-block {
  background: rgba(20,40,80,0.92);
  border-radius: 22px;
  box-shadow: 0 4px 32px #00eaff44, 0 2px 12px #0008;
  padding: 0 0 18px 0;
  position: relative;
  overflow: hidden;
}
.block-header {
  height: 10px;
  background: linear-gradient(90deg, #00eaff 0%, #1e3c5a 100%);
  border-radius: 22px 22px 0 0;
  margin-bottom: 12px;
}
.block-title {
  position: absolute;
  top: 16px;
  left: 32px;
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  letter-spacing: 2px;
  z-index: 2;
  text-shadow: 0 0 6px #00eaff, 0 2px 8px #1e3c5a;
}
.message-content {
  display: flex;
  flex-direction: row;
  gap: 18px;
  padding: 38px 18px 0 18px;
}
.message-chart-box {
  width: 200px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.message-line-chart {
  width: 200px;
  height: 140px;
}
.message-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  justify-content: center;
}
.message-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(0,234,255,0.08);
  border-left: 4px solid #00eaff;
  border-radius: 8px;
  padding: 10px 16px;
  color: #fff;
  box-shadow: 0 2px 8px #00eaff22;
  position: relative;
}
.msg-icon {
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 0 6px #00eaff88);
}
.msg-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.msg-title {
  font-size: 16px;
  font-weight: bold;
}
.msg-time {
  font-size: 13px;
  opacity: 0.7;
  margin-top: 2px;
}
.msg-divider {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 2px;
  background: linear-gradient(90deg, #00eaff44 0%, #1e3c5a00 100%);
  border-radius: 2px;
}
</style> 
